<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<%@include file="/WEB-INF/views/common/header.jsp" %>
	<title>创建管理员</title>
</head>
<body>
<%@include file="/WEB-INF/views/common/top.jsp" %>
<%@include file="/WEB-INF/views/common/nav.jsp" %>

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
	<div class="show-top-grids">
		<div class="main-grids about-main-grids">
			<h4>创建管理员</h4>
			<div class="recommended-info" pane="">

				<hr class="layui-bg-green">
				<form id="createUserForm" class="layui-form layui-form-pane" style="margin-top: 1em;" method="post"
				      action='<c:url value="/user/update"/>'>

					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">姓名</label>
							<div class="layui-input-inline">
								<input type="text" name="userName" id="userName" placeholder="姓名" autocomplete="off"
								       value="${user.userName}" class="layui-input"/>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">电话</label>
							<div class="layui-input-inline">
								<input type="text" name="phone" id="phone"
								       placeholder="电话" autocomplete="off"
								       value="${user.phone}" class="layui-input"/>
							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label">QQ</label>
							<div class="layui-input-inline">
								<input type="text" name="qq" id="qq"
								       placeholder="QQ" autocomplete="off"
								       value="${user.qq}" class="layui-input"/>
							</div>
						</div>


						<div class="layui-inline">
							<label class="layui-form-label">身份证</label>
							<div class="layui-input-inline">
								<input type="text" name="identity" id="identity"
								       placeholder="身份证" autocomplete="off"
								       value="${user.identity}" class="layui-input"/>
							</div>
						</div>

					</div>


					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">邮箱</label>
							<div class="layui-input-inline">
								<input type="text" name="email" id="email" placeholder="邮箱" autocomplete="off"
								       value="${user.email}"
								       class="layui-input"/>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">性别</label>
							<div class="layui-input-inline">
								<select id="gender" name="gender" style="display: inline-block;" class="layui-input">
									<option value="">请选择</option>
									<option value="true">男</option>
									<option value="false">女</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">出生日期</label>
							<div class="layui-input-inline">
								<input type="text" readonly="readonly" name="birthday" id="birthday" lay-verify="date"
								       placeholder="出生日期"
								       autocomplete="off" value="${user.birthdayStr}" class="layui-input"/>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">身高</label>
							<div class="layui-input-inline">
								<input type="number" name="stature" id="stature"
								       placeholder="身高" autocomplete="off"
								       value="${user.stature}" class="layui-input"/>
							</div>
						</div>

					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">兼职类型</label>
							<div class="layui-input-inline">
								<select id="postType" name="postType" style="display: inline-block;"
								        class="layui-input">
									<option value="">请选择</option>
									<option value="1">兼职</option>
									<option value="2">全职</option>
								</select>
							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label">学校名称</label>
							<div class="layui-input-inline">
								<input type="text" name="schoolName" id="schoolName"
								       placeholder="学校名称" autocomplete="off"
								       value="${user.schoolName}" class="layui-input"/>
							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label">当前学历</label>
							<div class="layui-input-inline">
								<select id="educationalBackground" name="educationalBackground"
								        style="display: inline-block;"
								        class="layui-input">
									<option value="">请选择</option>
									<option value="1">高中</option>
									<option value="2">大专</option>
									<option value="3">本科</option>
									<option value="4">硕士</option>
									<option value="5">博士</option>
									<option value="6">其他</option>
								</select>
							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label">当前年级</label>
							<div class="layui-input-inline">
								<input type="type" name="grade" id="grade"
								       placeholder="当前年级" autocomplete="off"
								       value="${user.grade}" class="layui-input"/>
							</div>
						</div>

					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">工作经验</label>
							<div class="layui-input-inline">
								<select id="partExperience" name="partExperience" style="display: inline-block;"
								        class="layui-input">
									<option value="">无</option>
									<option value="1">1年以下</option>
									<option value="2">1到3年</option>
									<option value="3">3到5年</option>
									<option value="4">5年以上</option>
								</select>
							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label">信用分</label>
							<div class="layui-input-inline">
								<input type="type" name="score" id="score"
								       placeholder="信用分" autocomplete="off"
								       value="${user.score}" class="layui-input"/>
							</div>
						</div>
					</div>

					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">居住省</label>
							<div class="layui-input-inline">
								<select id="currentProvince" name="currentProvince" tag="province"
								        style="display: inline-block;"
								        class="layui-input">
									<option value="">请选择</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">居住市</label>
							<div class="layui-input-inline">
								<select id="currentCity" name="currentCity" tag="city" style="display: inline-block;"
								        class="layui-input">
									<option value="">请选择</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">居住县</label>
							<div class="layui-input-inline">
								<select id="currentTown" name="currentTown" tag="town" style="display: inline-block;"
								        class="layui-input">
									<option value="">请选择</option>
								</select>

							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label">街道</label>
							<div class="layui-input-inline ">
								<select id="currentRoad" name="currentRoad" style="display: inline-block;"
								        class="layui-input">
									<option value="">请选择</option>
								</select>
							</div>
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">居住地址</label>
						<div class="layui-input-block layui-col-sm6" style="margin-left:0;">
							<input type="text" name="currentAddress" id="currentAddress"
							       placeholder="居住地址" autocomplete="off"
							       value="${user.currentAddress}" class="layui-input"/>
						</div>
					</div>


					<div class="layui-form-item">
						<label class="layui-form-label">兼职时间</label>
						<div class="layui-input-block layui-col-sm6" style="margin-left:0;height: 2em;"
						     id="divContainer">
							<input type="checkbox" title="星期一" value="1" name="partTimes"/>
							<input type="checkbox" title="星期二" value="2" name="partTimes"/>
							<input type="checkbox" title="星期三" value="3" name="partTimes"/>
							<input type="checkbox" title="星期四" value="4" name="partTimes"/>
							<input type="checkbox" title="星期五" value="5" name="partTimes"/>
							<input type="checkbox" title="星期六" value="6" name="partTimes"/>
							<input type="checkbox" title="星期日" value="7" name="partTimes"/>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">备注</label>
						<div class="layui-input-block layui-col-sm6" style="margin-left:0;height: 2em;">
							<input type="text" name="remark" id="remark" placeholder="备注"
							       autocomplete="off"
							       value="${user.remark}" class="layui-input"/>
						</div>
					</div>

					<div class="layui-col-md4 layui-col-md-offset4">
						<div class="grid-demo">
							<input type="hidden" id="id" name="id" value="${user.id}"/>
                            <button class="layui-btn" type="submit" id="btn_create_user">修改</button>
						</div>
					</div>

				</form>
			</div>
		</div>
	</div>

</div>
</body>

<script type="application/javascript">

	/*导航栏参数*/
    var $nav_a = $("#ul_nav a[href='/user/list']");
	$nav_a.parent().addClass("active");
	$nav_a.parent().parent().css("display", "block");


	layui.use(['layer', 'laydate'], function () {
		window.layer = layui.layer;
		var laydate = layui.laydate;
		laydate.render({
			elem: '#birthday'
		});
	});


	$(function () {

		/*修改checkbox 样式*/
		$("#divContainer :checkbox").each(function () {
			var title = $(this).attr("title");
			var funcType = $(this).attr("tag-index");
			var div = $("<div class=\"layui-unselect layui-form-checkbox\" func-type=" + funcType + " lay-skin=\"primary\">"
				+ "<span>" + title + "</span><i class=\"layui-icon\"></i></div>");

			$(div).click(function () {
				var che = $(this).prev().prop("checked");
				$(this).prev().prop("checked", !che);
				if (!che) {
					$(this).addClass("layui-form-checked");
				} else {
					$(this).removeClass("layui-form-checked");
				}
			});
			$(this).after(div);
		});

		/*初始化页面元素*/
		initPage();

		$("#currentProvince").change(function () {
			initSelect("currentCity", "", $(this).val());
		});
		$("#currentCity").change(function () {
			initSelect("currentTown", "", $(this).val());
		});
		$("#currentTown").change(function () {
			initArea("currentRoad", "", $(this).val());
		});


		window.fault = false;
		$("#createUserForm").validate({
			onfocusout: false,
			onkeyup: false,
			onclick: false,
			submitHandler: function () {
				var formData = $('#createUserForm').serializeObject();
				formData = JSON.stringify(formData);
				$.ajax({
					url: '<c:url value="/user/update"/>',
					dataType: 'json',
					type: 'post',
					data: formData,
					contentType: "application/json",
					error: function () {
					},
					success: function (data) {
						if (data.code !== "200") {
							window.layer.msg(data.message, {icon: 5, anim: 6});
						} else {
                            window.layer.msg("修改成功！", {icon: 6, anim: 6});
                            window.location.href = '<c:url value="/user/list"/>'
						}
					}
				});
			},
			rules: {
				userName: {
					required: true
				},
				phone: {
					required: true,
					validPhone: true
				},
				identity: {
					required: true,
					validIdentity: true
				},
				birthday: {
					required: true
				}
				, schoolName: {
					required: true
				}
				, currentProvince: {
					required: true
				}
				, currentCity: {
					required: true
				}
				, currentArea: {
					required: true
				}
			},
			messages: {

				userName: {
					required: "名称不能为空"
				},
				phone: {
					required: "手机号不能为空",
					validPhone: "手机号格式不正确"
				},
				identity: {
					required: "身份证不能为空",
					validIdentity: "请输入真实身份证"
				},
				birthday: {
					required: "出生日期"
				}
				, schoolName: {
					required: "请填写学校名称"
				}
				, currentProvince: {
					required: "选择现居住省"
				}
				, currentCity: {
					required: "选择现居住市"
				}
				, currentArea: {
					required: "选择现居住县"
				}
			},
			showErrors: function (errorMap, errorList) {
				window.fault = this.numberOfInvalids() > 0;
				this.defaultShowErrors();
			},
			errorPlacement: function (error, element) {
				if (window.fault) {
					window.fault = false;
					$(element).addClass("layui-form-danger").focus();
					window.layer.msg($(error).text(), {icon: 5, anim: 6});
				}
			}
		});
	});


	function initSelect(name, currentCode, parentCode) {
		var container = $("#" + name);
		$(container).empty();
		var tag = $(container).attr("tag");
		$(container).append("<option value=''>请选择</option>");
		$.ajax({
			url: '/static/json/list.json'
			, type: 'GET'
			, dataType: "json"
			, success: function (data) {
				for (var code in data) {
					if (tag == "province" && code % 1e4 == 0) {
						if (code == currentCode) {
							$(container).append("<option selected value='" + code + "'>" + data[code] + "</option>");
						} else {
							$(container).append("<option value='" + code + "'>" + data[code] + "</option>");
						}
					} else if (tag == "city" && code % 1e2 == 0) {
						var preCode = parseInt(code / 1e4);
						var preParentCode = parseInt(parentCode / 1e4);
						if (preCode == preParentCode) {
							if (code != parentCode || ["50", "31", "11", "12"].indexOf(preCode + "") > -1) {

								if (code == currentCode) {
									$(container).append("<option selected value='" + code + "'>" + data[code] + "</option>");
								} else {
									$(container).append("<option value='" + code + "'>" + data[code] + "</option>");
								}
							}
						}
					} else if (tag == "town") {
						if (code % 1e2 != 0) {
							var preCode = parseInt(code / 1e2);
							var preParentCode = parseInt(parentCode / 1e2);
							if (preCode == preParentCode) {
								if (code == currentCode) {
									$(container).append("<option selected value='" + code + "'>" + data[code] + "</option>");
								} else {
									$(container).append("<option value='" + code + "'>" + data[code] + "</option>");
								}
							} else {
								if (parseInt(preCode / 10) == parseInt(preParentCode / 10)) {
									if (code == currentCode) {
										$(container).append("<option selected value='" + code + "'>" + data[code] + "</option>");
									} else {
										$(container).append("<option value='" + code + "'>" + data[code] + "</option>");
									}
								}
							}
						}
					}

				}
			}
		});
	}

	function initArea(name, currentCode, code) {
		var container = $("#" + name);
		$(container).empty();
		$(container).append("<option value=''>请选择</option>");
		if (code == "") {
			return true;
		}
		var url = "/static/json/town/" + code + ".json";
		$.ajax({
			url: url
			, type: 'GET'
			, dataType: "json"
			, success: function (data) {
				for (var code in data) {
					if (code == currentCode) {
						$(container).append("<option selected value='" + code + "'>" + data[code] + "</option>");
					} else {
						$(container).append("<option value='" + code + "'>" + data[code] + "</option>");
					}
				}
				if ("9999" == currentCode) {
					$(container).append("<option selected value='999999'>其他</option>");
				} else {
					$(container).append("<option  value='999999'>其他</option>");
				}
			}
		});
	}
	function initPage() {

		/*绑定省*/
		initSelect("currentProvince", "${user.currentProvince}", null);
		initSelect("currentCity", "${user.currentCity}", "${user.currentProvince}");
		initSelect("currentTown", "${user.currentTown}", "${user.currentCity}");
		initArea("currentRoad", "${user.currentRoad}", "${user.currentTown}");

		$("#gender").val("${user.gender}");
		$("#postType").val("${user.postType}");
		$("#educationalBackground").val("${user.educationalBackground}");
		$("#partExperience").val("${user.partExperience}");

		<c:if test="${user.schedules != null}">
		<c:forEach var="schedule" items="${user.schedules}">
		$(":checkbox[value='${schedule.code}']").next().addClass("layui-form-checked");
		$(":checkbox[value='${schedule.code}']").prop("checked", true);
		</c:forEach>
		</c:if>

	}
</script>


</html>
